  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="generator" content="pandoc" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>GTK 4 tutorial</title>
    <style>
      code{white-space: pre-wrap;}
      span.smallcaps{font-variant: small-caps;}
      span.underline{text-decoration: underline;}
      div.column{display: inline-block; vertical-align: top; width: 50%;}
      div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
      ul.task-list{list-style: none;}
      pre{overflow: visible;}
      pre > code.sourceCode { white-space: pre; position: relative; }
      pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
      pre > code.sourceCode > span:empty { height: 1.2em; }
      code.sourceCode > span { color: inherit; text-decoration: inherit; }
      div.sourceCode { margin: 1em 0; }
      pre.sourceCode { margin: 0; }
      @media screen {
      div.sourceCode { overflow: auto; }
      }
      @media print {
      pre > code.sourceCode { white-space: pre-wrap; }
      pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
      }
      pre.numberSource code
        { counter-reset: source-line 0; }
      pre.numberSource code > span
        { position: relative; left: -4em; counter-increment: source-line; }
      pre.numberSource code > span > a:first-child::after
        { content: counter(source-line);
          position: relative; left: -1em; text-align: right; vertical-align: baseline;
          border: none; display: inline-block;
          -webkit-touch-callout: none; -webkit-user-select: none;
          -khtml-user-select: none; -moz-user-select: none;
          -ms-user-select: none; user-select: none;
          padding: 0 4px; width: 4em;
          color: #aaaaaa;
        }
      pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
      div.sourceCode
        {   }
      @media screen {
      pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
      }
      code span.al { color: #ff0000; font-weight: bold; } /* Alert */
      code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
      code span.at { color: #7d9029; } /* Attribute */
      code span.bn { color: #40a070; } /* BaseN */
      code span.bu { } /* BuiltIn */
      code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
      code span.ch { color: #4070a0; } /* Char */
      code span.cn { color: #880000; } /* Constant */
      code span.co { color: #60a0b0; font-style: italic; } /* Comment */
      code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
      code span.do { color: #ba2121; font-style: italic; } /* Documentation */
      code span.dt { color: #902000; } /* DataType */
      code span.dv { color: #40a070; } /* DecVal */
      code span.er { color: #ff0000; font-weight: bold; } /* Error */
      code span.ex { } /* Extension */
      code span.fl { color: #40a070; } /* Float */
      code span.fu { color: #06287e; } /* Function */
      code span.im { } /* Import */
      code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
      code span.kw { color: #007020; font-weight: bold; } /* Keyword */
      code span.op { color: #666666; } /* Operator */
      code span.ot { color: #007020; } /* Other */
      code span.pp { color: #bc7a00; } /* Preprocessor */
      code span.sc { color: #4070a0; } /* SpecialChar */
      code span.ss { color: #bb6688; } /* SpecialString */
      code span.st { color: #4070a0; } /* String */
      code span.va { color: #19177c; } /* Variable */
      code span.vs { color: #4070a0; } /* VerbatimString */
      code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
      div.sourceCode { margin: 10px; padding: 16px 10px 8px 10px; border: 2px solid silver; background-color: ghostwhite; overflow-x:scroll}
      pre:not(.sourceCode) { margin: 10px; padding: 16px 10px 8px 10px; border: 2px solid silver; background-color: ghostwhite; overflow-x:scroll}
      table {margin-left: auto; margin-right: auto; border-collapse: collapse; border: 1px solid;}
      th {padding: 2px 6px; border: 1px solid; background-color: ghostwhite;}
      td {padding: 2px 6px; border: 1px solid;}
      img {display: block; margin-left: auto; margin-right: auto;}
      figcaption {text-align: center;}
    </style>
  </head>
  <body style="padding-top: 70px;">
    <div class="container">
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <span class="navbar-brand">Gtk4 tutorial</span>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>

            <li class="nav-item">
<a class="nav-link" href="sec9.html">Prev: section9</a>
</li>

            <li class="nav-item">
<a class="nav-link" href="sec11.html">Next: section11</a>
</li>

          </ul>
        </div>
      </div>
    </nav>
<h1 id="build-system">Build system</h1>
<h2 id="managing-big-source-files">Managing big source files</h2>
<p>We’ve compiled a small editor so far. But Some bad signs are
beginning to appear.</p>
<ul>
<li>We’ve had only one C source file and put everything in it. We need
to sort it out.</li>
<li>There are two compilers, <code>gcc</code> and
<code>glib-compile-resources</code>. We should control them by one
building tool.</li>
</ul>
<p>These ideas are useful to manage big source files.</p>
<h2 id="divide-a-c-source-file-into-two-parts.">Divide a C source file
into two parts.</h2>
<p>When you divide C source file into several parts, each file should
contain one thing. For example, our source has two things, the
definition of TfeTextView and functions related to GtkApplication and
GtkApplicationWindow. It is a good idea to separate them into two files,
<code>tfetextview.c</code> and <code>tfe.c</code>.</p>
<ul>
<li><code>tfetextview.c</code> includes the definition and functions of
TfeTextView.</li>
<li><code>tfe.c</code> includes functions like <code>main</code>,
<code>app_activate</code>, <code>app_open</code> and so on, which relate
to GtkApplication and GtkApplicationWindow</li>
</ul>
<p>Now we have three source files, <code>tfetextview.c</code>,
<code>tfe.c</code> and <code>tfe3.ui</code>. The <code>3</code> of
<code>tfe3.ui</code> is like a version number. Managing version with
filenames is one possible idea but it may make bothersome problem. You
need to rewrite filename in each version and it affects to contents of
source files that refer to filenames. So, we should take <code>3</code>
away from the filename.</p>
<p>In <code>tfe.c</code> the function <code>tfe_text_view_new</code> is
invoked to create a TfeTextView instance. But it is defined in
<code>tfetextview.c</code>, not <code>tfe.c</code>. The lack of the
declaration (not definition) of <code>tfe_text_view_new</code> makes
error when <code>tfe.c</code> is compiled. The declaration is necessary
in <code>tfe.c</code>. Those public information is usually written in
header files. It has <code>.h</code> suffix like
<code>tfetextview.h</code> And header files are included by C source
files. For example, <code>tfetextview.h</code> is included by
<code>tfe.c</code>.</p>
<p>All the source files are listed below.</p>
<p><code>tfetextview.h</code></p>
<p>@@<span class="citation" data-cites="include">@include</span>
tfe4/tfetextview.h @@@</p>
<p><code>tfetextview.c</code></p>
<p>@@<span class="citation" data-cites="include">@include</span>
tfe4/tfetextview.c @@@</p>
<p><code>tfe.c</code></p>
<p>@@<span class="citation" data-cites="include">@include</span>
tfe4/tfe.c @@@</p>
<p>The ui file <code>tfe.ui</code> is the same as <code>tfe3.ui</code>
in the previous section.</p>
<p><code>tfe.gresource.xml</code></p>
<p>@@<span class="citation" data-cites="include">@include</span>
tfe4/tfe.gresource.xml @@@</p>
<p>Dividing a file makes it easy to maintain source files. But now we
face a new problem. The building step increases.</p>
<ul>
<li>Compiling the ui file <code>tfe.ui</code> into
<code>resources.c</code>.</li>
<li>Compiling <code>tfe.c</code> into <code>tfe.o</code> (object
file).</li>
<li>Compiling <code>tfetextview.c</code> into
<code>tfetextview.o</code>.</li>
<li>Compiling <code>resources.c</code> into
<code>resources.o</code>.</li>
<li>Linking all the object files into application <code>tfe</code>.</li>
</ul>
<p>Build tools manage the steps. I’ll show you three build tools, Meson
and Ninja, Make and Rake. Meson and Ninja is recommended as a C build
tool, but others are also fine. It’s your choice.</p>
<h2 id="meson-and-ninja">Meson and Ninja</h2>
<p>Meson and Ninja is one of the most popular building tool to build C
language program. Many developers use Meson and Ninja lately. For
example, GTK 4 uses them.</p>
<p>You need to make <code>meson.build</code> file first.</p>
<p>@@<span class="citation" data-cites="include">@include</span>
tfe4/meson.build @@@</p>
<ul>
<li>1: The function <code>project</code> defines things about the
project. The first parameter is the name of the project and the second
is the programming language.</li>
<li>2: <code>dependency</code> function defines a dependency that is
taken by <code>pkg-config</code>. We put <code>gtk4</code> as an
argument.</li>
<li>5: <code>import</code> function imports a module. In line 5, the
gnome module is imported and assigned to the variable
<code>gnome</code>. The gnome module provides helper tools to build GTK
programs.</li>
<li>6: <code>.compile_resources</code> is a method of the gnome module
and compiles files to resources under the instruction of xml file. In
line 6, the resource filename is <code>resources</code>, which means
<code>resources.c</code> and <code>resources.h</code>, and xml file is
<code>tfe.gresource.xml</code>. This method generates C source file by
default.</li>
<li>8: Defines source files.</li>
<li>10: Executable function generates a target file by compiling source
files. The first parameter is the filename of the target. The following
parameters are source files. The last parameter is an option
<code>dependencies</code>. <code>gtkdep</code> is used in the
compilation.</li>
</ul>
<p>Now run meson and ninja.</p>
<pre><code>$ meson _build
$ ninja -C _build</code></pre>
<p>Then, the executable file <code>tfe</code> is generated under the
directory <code>_build</code>.</p>
<pre><code>$ _build/tfe tfe.c tfetextview.c</code></pre>
<p>A window appears. It includes a notebook with two pages. One is
<code>tfe.c</code> and the other is <code>tfetextview.c</code>.</p>
<p>For further information, see <a href="https://mesonbuild.com/">The
Meson Build system</a>.</p>
<h2 id="make">Make</h2>
<p>Make is a build tool created in 1976. It was a standard build tool
for C compiling, but lately it is replaced by Meson and Ninja.</p>
<p>Make analyzes Makefile and executes compilers. All instructions are
written in Makefile.</p>
<p>For example,</p>
<div class="sourceCode" id="cb3"><pre
class="sourceCode makefile"><code class="sourceCode makefile"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="dv">sample.o:</span><span class="dt"> sample.c</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a>    gcc -o sample.o sample.c</span></code></pre></div>
<p>Malefile above consists of three elements, <code>sample.o</code>,
<code>sample.c</code> and <code>gcc -o sample.o sample.c</code>.</p>
<ul>
<li><code>sample.o</code> is a target.</li>
<li><code>sample.c</code> is a prerequisite.</li>
<li><code>gcc -o sample.o sample.c</code> is a recipe. Recipes follow
tab characters, not spaces. (It is very important. Use tab, or make
won’t work as you expected).</li>
</ul>
<p>The rule is:</p>
<p>If a prerequisite modified later than a target, then make executes
the recipe.</p>
<p>In the example above, if <code>sample.c</code> is modified after the
generation of <code>sample.o</code>, then make executes gcc and compile
<code>sample.c</code> into <code>sample.o</code>. If the modification
time of <code>sample.c</code> is older then the generation of
<code>sample.o</code>, then no compiling is necessary, so make does
nothing.</p>
<p>The Makefile for <code>tfe</code> is as follows.</p>
<p>@@<span class="citation" data-cites="include">@include</span>
tfe4/Makefile @@@</p>
<p>You just type <code>make</code> and everything will be done.</p>
<pre><code>$ make
gcc -c -o tfe.o `pkg-config --cflags gtk4` tfe.c
gcc -c -o tfetextview.o `pkg-config --cflags gtk4` tfetextview.c
glib-compile-resources tfe.gresource.xml --target=resources.c --generate-source
gcc -c -o resources.o `pkg-config --cflags gtk4` resources.c
gcc -o tfe tfe.o tfetextview.o resources.o `pkg-config --libs gtk4`</code></pre>
<p>I used only very basic rules to write this Makefile. There are many
more convenient methods to make it more compact. But it will be long to
explain it. So I want to finish with make and move on to the next
topic.</p>
<p>You can download “Gnu Make Manual” from <a
href="https://www.gnu.org/software/make/manual/">GNU website</a>.</p>
<h2 id="rake">Rake</h2>
<p>Rake is a similar program to make. It is written in Ruby language. If
you don’t use Ruby, you don’t need to read this subsection. However,
Ruby is really sophisticated and recommendable script language.</p>
<ul>
<li>Rakefile controls the behavior of <code>rake</code>.</li>
<li>You can write any Ruby code in Rakefile.</li>
</ul>
<p>Rake has task and file task, which is similar to target, prerequisite
and recipe in make.</p>
<p>@@<span class="citation" data-cites="include">@include</span>
tfe4/Rakefile @@@</p>
<p>The contents of the <code>Rakefile</code> is almost same as the
<code>Makefile</code> in the previous subsection.</p>
<ul>
<li>3-8: Defines target file, source files and so on.</li>
<li>1, 10 Requires rake/clean library. And clean files are added to
CLEAN. The files included by CLEAN will be removed when
<code>rake clean</code> is typed on the command line.</li>
<li>12: The default target depends on <code>targetfile</code>. The task
<code>default</code> is the final goal of tasks.</li>
<li>14-16: <code>targetfile</code> depends on <code>objfiles</code>. The
variable <code>t</code> is a task object.
<ul>
<li><code>t.name</code> is a target name</li>
<li><code>t.prerequisites</code> is an array of prerequisites.</li>
<li><code>t.source</code> is the first element of prerequisites.</li>
</ul></li>
<li><code>sh</code> is a method to give the following string to shell as
an argument and executes the shell.</li>
<li>18-23: An each iterator of the array <code>objfiles</code>. Each
object depends on corresponding source file.</li>
<li>25-27: Resource file depends on ui file.</li>
</ul>
<p>Rakefile might seem to be difficult for beginners. But, you can use
any Ruby syntax in the Rakefile, so it is really flexible. If you
practice Ruby and Rakefile, it will be highly productive tools.</p>
<p>For further information, see <a
href="https://toshiocp.github.io/Rake-tutorial-for-beginners-en/LearningRake.html">Rake
tutorial for beginners</a>.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
  </html>
